<template>
  <div style="position:relative;background:#EFEFF2;min-height: 100vh;display: flex;justify-content: center;align-items: center;flex-direction: column;">
    <div class="user_wrapper">
      <div class="u0 clearfix">
        <div class="u1">
          <img src="../../assets/images/user/user_left.png"
               alt=""
               style="width:400px; height:529px" />
        </div>
        <Form :model="formValidate"
              ref="formValidate"
              class="u2">
          <div class="user_title_wrapper">
            <p class="ut"
               :class="{'ut_select':active == 0}"
               @click="active = 0"><span>密码登录</span></p>
            <p class="ut"
               :class="{'ut_select':active == 1}"
               @click="active = 1"
               v-if='0'><span>短信登录</span></p>
          </div>
          <div style="width: 70%;margin: 0 auto;"
               v-if="active == 0">
            <FormItem prop="username">
              <Input v-model="formValidate.username"
                     placeholder="登录账户"
                     class="pass" />
            </FormItem>
            <FormItem prop="password">
              <Input type="password"
                     v-model="formValidate.password"
                     placeholder="登录密码"
                     class="pass"
                     @keyup.enter.native="login()" />
            </FormItem>
            <FormItem>
              <Checkbox v-model="single"
                        v-if='0'>自动登录</Checkbox>
              <p class="forget" v-if='0'>
                <span @click="changePassword">忘记密码</span>
                <span @click="register">注册</span>
              </p>
            </FormItem>
            <FormItem>
              <Button type="primary"
                      style="width: 100%;height: 38px;"
                      @click.stop="login()">登录</Button>
            </FormItem>
          </div>
          <div style="width: 70%;margin: 0 auto;"
               v-if="active == 1">
            <FormItem prop="phone">
              <Input v-model="formValidate.phone"
                     placeholder="手机号码"
                     class="pass" />
            </FormItem>
            <FormItem prop="code">
              <Input v-model="formValidate.code"
                     placeholder="短信验证码"
                     style="width: 72%;"
                     class="pass"
                     @keyup.enter.native="sendCode()" />
              <Button v-show="show"
                      @click="sendCode()"
                      style="width: 28%;height: 38px;margin-top: 1px;"
                      type="primary">发送验证码</Button>
              <Button v-show="!show"
                      style="width: 28%;height: 38px;margin-top: 1px;background: #dcdee2;color: #fff;"
                      disabled>{{count}} s</Button>
            </FormItem>
            <FormItem v-if='0'>
              <p class="forget">
                <span @click="changePassword">忘记密码</span>
                <span @click="register"
                      v-if='0'>注册</span>
              </p>
            </FormItem>
            <FormItem>
              <Button type="primary"
                      style="width: 100%;height: 38px;"
                      @click.stop="verifyCode">登录</Button>
            </FormItem>
          </div>
        </Form>
      </div>
    </div>
  </div>
</template>

<script>
import { sendCode, checkCode, loginByUsername, loginByPhoneCode } from '@/api/main'
export default {
  name: "login",
  data () {
    return {
      active: 0,
      single: false,
      count: '',
      show: true,
      timer: null,
      formValidate: {
        username: '',
        password: '',
        phone: '',
        code: ''
      }
    }
  },
  methods: {
    changePassword () {
      this.$router.push({ name: 'change_password' })
    },
    register () {
      this.$router.push({ name: 'register' })
    },
    getCode () {
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000)
      }
    },
    sendCode () {
      let _this = this
      if (_this.formValidate.phone == '') {
        this.$Message.error("请输入手机号");
        return;
      }
      if (!/^((1[3,5,8][0-9])|(14[5,7])|(17[0,3,6,7,8])|(19[7,9]))\d{8}$/.test(_this.formValidate.phone)) {
        this.$Message.error("手机号格式不正确");
        return;
      }
      let obj = {}
      obj.phone = _this.formValidate.phone
      obj.from = 2
      sendCode(obj).then(res => {
        if (res.code == 0) {
          this.$Message.success("发送成功");
          this.getCode();

        } else {
          this.$Message.error(res.text);
        }
      })
    },
    verifyCode () {
      let _this = this
      if (_this.active == 1) {
        if (_this.formValidate.phone == '') {
          this.$Message.error('请输入手机号码'); return;
        }
        if (_this.formValidate.code == '') {
          this.$Message.error('请输入验证码'); return;
        }
        loginByPhoneCode(_this.formValidate).then(res => {
          _this.callBack(res)
        })
      }
    },
    login () {
      let _this = this
      if (_this.active == 0) {
        if (_this.formValidate.username == '') {
          this.$Message.error('请输入登录账户'); return;
        }
        if (_this.formValidate.password == '') {
          this.$Message.error('请输入登录密码'); return;
        }
        loginByUsername(_this.formValidate).then(res => {
          _this.callBack(res)
        })
      }
    },

    callBack (res) {
      //console.log(res); return;
      if (res.code == 0) {
        let user = {}
        user.id = res.id
        user.username = res.username
        user.token = res.Authorization
        user.avatorImgPath = res.icon
        localStorage.setItem('avator_brand', res.icon)
        user.role = res.role
        user.first_access = res.first_access
        let timestamp_now = Date.parse(new Date());
        user.token_time = timestamp_now / 1000
        localStorage.setItem('user_admin', JSON.stringify(user))
        this.$store.commit('setAvator', res.icon)
        if (res.role == '超级管理员') {
          window.location.href = '/admin-view/system_manage/system-setting'
        } else {
          if (!res.role) {
            this.$Message.error('账号角色异常，请联系管理员'); return;
          }
          if (!res.first_access) {
            this.$Message.error('账号权限异常，请联系管理员'); return;
          }
          //console.log(res);return;
          localStorage.setItem('first_access', res.first_access)
          let routeData = this.$router.resolve({ name: res.first_access })
          //console.log(routeData.route.fullPath); return;
          window.location.href = routeData.route.fullPath
        }
      } else {
        this.$Message.error(res.text);
        return
      }
    }
  },
  mounted () {

  }
}
</script>
